<!doctype html>
<html lang="zh-CN">
 <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>年度规划项目 - 学员端</title> 
  <script src="../javascript/reload.js"></script> 
  <script src="./1967868801315766272/resource_4574510000.js"></script> 
  <link href="./1967868801315766272/all.min.css" rel="stylesheet"> 
  <script src="./1967868801315766272/echarts.min.js"></script> 
  <script>tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#0E42D2',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#E5E6EB',
                        'text-primary': '#1D2129',
                        'text-secondary': '#4E5969',
                        'text-tertiary': '#86909C',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    spacing: {
                        '220': '220px',
                        '250': '250px',
                    }
                },
            }
        }</script> 
  <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .menu-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .menu-item {
                @apply flex items-center px-4 py-3 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer;
            }
            .menu-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .submenu-item {
                @apply flex items-center px-8 py-2.5 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer text-sm;
            }
            .submenu-item-active {
                @apply bg-primary/10 text-primary;
            }
            .card-shadow {
                box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-accent transition-all duration-200 flex items-center justify-center;
            }
            .btn-secondary {
                @apply bg-white text-primary border border-primary px-4 py-2 rounded-md hover:bg-primary/5 transition-all duration-200 flex items-center justify-center;
            }
            .btn-outline {
                @apply bg-white text-text-secondary border border-neutral-dark px-4 py-2 rounded-md hover:bg-neutral transition-all duration-200 flex items-center justify-center;
            }
            .input-field {
                @apply w-full px-3 py-2 border border-neutral-dark rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
            }
            .table-header {
                @apply bg-neutral text-text-secondary text-sm font-medium px-4 py-3;
            }
            .table-row {
                @apply border-b border-neutral-dark hover:bg-neutral/50 transition-all duration-200;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .badge-success {
                @apply bg-green-100 text-green-700;
            }
            .badge-warning {
                @apply bg-yellow-100 text-yellow-700;
            }
            .badge-danger {
                @apply bg-red-100 text-red-700;
            }
            .badge-info {
                @apply bg-blue-100 text-blue-700;
            }
            .badge-purple {
                @apply bg-purple-100 text-purple-700;
            }
            .badge-gray {
                @apply bg-gray-100 text-gray-700;
            }
            .progress-bar {
                @apply h-2 rounded-full overflow-hidden bg-neutral-dark;
            }
            .progress-value {
                @apply h-full rounded-full bg-primary transition-all duration-500 ease-out;
            }
        }
    </style> 
 </head> 
 <body class="font-inter bg-neutral text-text-primary h-screen flex overflow-hidden"> 
  <!-- 左侧菜单区域 --> 
  <aside id="sidebar" class="w-220 bg-white h-full shadow-md z-10 transition-all duration-300 ease-in-out"> 
   <!-- 品牌标识 --> 
   <div class="flex items-center justify-center h-16 border-b border-neutral-dark"> 
    <div class="flex items-center"> 
     <i class="fas fa-chart-line text-primary text-2xl mr-3"> </i> 
     <h1 class="text-xl font-bold text-primary"> Hi Quick AI </h1> 
    </div> 
   </div> 
   <!-- 菜单列表 --> 
   <nav class="py-4 h-[calc(100%-4rem)] overflow-y-auto scrollbar-hide"> 
    <div class="menu-group">
     <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1181&amp;h=762&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968264071639728128&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
      <div class="menu-item flex justify-between" data-menu="monthly" data-selectorname="#id-pe1s4" style="background-color:#ffffffff"> 
       <div class="flex items-center"> 
        <i class="fas fa-calendar-check text-lg mr-3"> </i> 
        <span class="" contenteditable="false" style="outline: none;"> 工作台 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-monthly"> 
     </div> 
    </div> 
    <!-- 公司公告 --> 
    <div class="menu-group"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1170&amp;h=728&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1968578812111224832&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
      <div class="menu-item flex justify-between" data-menu="announcements" data-selectorname="#id-wgtje" style="background-color:#ffffffff"> 
       <div class="flex items-center"> 
        <i class="fas fa-bullhorn text-lg mr-3"> </i> 
        <span> 公司公告 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-announcements"> 
     </div> 
    </div> 
    <!-- 年规管理 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="planning"> 
      <div class="flex items-center"> 
       <i class="fas fa-bullseye text-lg mr-3"> </i> 
       <span> 年规管理 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-planning" data-ytextravalue="extra-qgxvfz3ne"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1969787710210048000&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="0" data-ytindex="0" data-ytparentvalue="extra-qgxvfz3ne"> 
       <div class="submenu-item" data-page="goal-dashboard" data-selectorname="#id-vtfgp" style> 
        <i class="fas fa-chart-pie text-xs mr-2"> </i> 
        <span> 目标进度看板 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1390&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969803110087917568&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="1" data-ytindex="1"> 
       <div class="submenu-item" data-page="performance-entry" data-selectorname="#id-bvmzu" style> 
        <i class="fas fa-pencil-alt text-xs mr-2"> </i> 
        <span> 业绩回填 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967832363245240320&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="2" data-ytindex="2"> 
       <div class="submenu-item" data-page="product-library" data-selectorname="#id-sv876" style> 
        <i class="fas fa-box text-xs mr-2"> </i> 
        <span> 产品库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969766167933353984&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytparentvalue="extra-qgxvfz3ne" data-ytoriginindex="3" data-ytindex="3"> 
       <div class="submenu-item" data-page="marketing-plan" data-selectorname="#id-yo913" style> 
        <i class="fas fa-bullhorn text-xs mr-2"> </i> 
        <span> 营销计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967839529905684480&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="4" data-ytindex="4"> 
       <div class="submenu-item" data-page="customer-records" data-selectorname="#id-k7u8o" style> 
        <i class="fas fa-users text-xs mr-2"> </i> 
        <span> 客户档案 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967841389332922368&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="5" data-ytindex="5"> 
       <div class="submenu-item" data-page="pk-activities" data-selectorname="#id-9q03u" style> 
        <i class="fas fa-trophy text-xs mr-2"> </i> 
        <span> PK 活动 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 工作管理 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="work"> 
      <div class="flex items-center"> 
       <i class="fas fa-briefcase text-lg mr-3"> </i> 
       <span> 工作管理 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-work"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967843857995399168&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="work-dashboard" data-selectorname="#id-rd289" style> 
        <i class="fas fa-chart-bar text-xs mr-2"> </i> 
        <span> 周日报管理 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967850301578805248&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="meeting-plan" data-selectorname="#id-0wpdi" style> 
        <i class="fas fa-calendar-alt text-xs mr-2"> </i> 
        <span> 会议计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967852373321711616&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="work-tasks" data-selectorname="#id-4kes7" style> 
        <i class="fas fa-tasks text-xs mr-2"> </i> 
        <span> 工作任务 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 学习成长 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="learning"> 
      <div class="flex items-center"> 
       <i class="fas fa-graduation-cap text-lg mr-3"> </i> 
       <span> 学习成长 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-learning"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1113&amp;h=728&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968967895824203776&amp;appName=年规学员端最新版1.1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="company-culture" data-selectorname="#id-vlvvu" style> 
        <i class="fas fa-building text-xs mr-2"> </i> 
        <span style> 企业文化 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868783729049600&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="course-center" data-selectorname="#id-7f4sh" style> 
        <i class="fas fa-book-open text-xs mr-2"> </i> 
        <span style> 课程中心 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868795963834368&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="knowledge-base" data-selectorname="#id-8elvo" style> 
        <i class="fas fa-book text-xs mr-2"> </i> 
        <span> 知识库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868797977100288&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="learning-plan" data-selectorname="#id-kc931" style> 
        <i class="fas fa-clipboard-list text-xs mr-2"> </i> 
        <span> 学习计划 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 个人档案 --> 
    <div class="menu-group"> 
     <div class="menu-item menu-item-active flex justify-between" data-menu="profile"> 
      <div class="flex items-center"> 
       <i class="fas fa-user text-lg mr-3"> </i> 
       <span> 个人档案 </span> 
      </div> 
      <i class="fas fa-chevron-down text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu" id="submenu-profile"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868800292356096&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="basic-info" data-selectorname="#id-ktjba" style> 
        <i class="fas fa-id-card text-xs mr-2"> </i> 
        <span data-selectorname="span"> 基本信息 </span> 
       </div> </a> 
      <div class="submenu-item submenu-item-active" data-page="account-settings"> 
       <i class="fas fa-cog text-xs mr-2"> </i> 
       <span> 账号设置 </span> 
      </div> 
     </div> 
    </div> 
   </nav> 
  </aside> 
  <!-- 右侧内容区域 --> 
  <main class="flex-1 flex flex-col overflow-hidden"> 
   <!-- 顶部导航栏 --> 
   <header class="h-16 bg-white border-b border-neutral-dark flex items-center justify-between px-6 z-10"> 
    <div class="flex items-center"> 
     <button id="toggle-sidebar" class="mr-4 text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bars text-xl"> </i> </button> 
     <div class="text-sm text-text-tertiary" id="breadcrumb"> 
      <span> 个人档案 </span> 
      <i class="fas fa-angle-right mx-2 text-xs"> </i> 
      <span> 账号设置 </span> 
     </div> 
    </div> 
    <div class="flex items-center space-x-6"> 
     <div class="relative"> 
      <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-full text-sm border border-neutral-dark focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64"> 
      <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-tertiary"> </i> 
     </div> 
     <div class="relative"> 
      <button class="relative text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bell text-xl"> </i> <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"> </span> </button> 
     </div> 
     <div class="flex items-center cursor-pointer group"> 
      <img src="./1967868801315766272/f48e4ae6256cb09fa61d11486866b14f.png" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all duration-200"> 
      <div class="ml-2 hidden md:block"> 
       <div class="text-sm font-medium">
         张明 
       </div> 
       <div class="text-xs text-text-tertiary">
         销售部 
       </div> 
      </div> 
      <i class="fas fa-angle-down ml-1 text-text-tertiary"> </i> 
     </div> 
    </div> 
   </header> 
   <!-- 内容滚动区域 --> 
   <div class="flex-1 overflow-y-auto p-6 bg-neutral" id="content-area"> 
    <!-- 账号设置页面 --> 
    <div class="page active" id="page-account-settings"> 
     <div class="flex justify-between items-center mb-6"> 
      <h2 class="text-2xl font-bold"> 账号设置 </h2> 
     </div> 
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> 
      <!-- 左侧导航 --> 
      <div class="lg:col-span-1 bg-white rounded-lg card-shadow p-6"> 
       <div class="space-y-1"> 
        <div class="account-nav-item active py-3 px-4 rounded-md flex items-center cursor-pointer" data-tab="security"> 
         <i class="fas fa-shield-alt text-primary mr-3"> </i> 
         <span class="font-medium"> 安全设置 </span> 
        </div> 
        <div class="account-nav-item py-3 px-4 rounded-md flex items-center cursor-pointer" data-tab="notification"> 
         <i class="fas fa-bell text-text-secondary mr-3"> </i> 
         <span> 通知设置 </span> 
        </div> 
        <div class="account-nav-item py-3 px-4 rounded-md flex items-center cursor-pointer" data-tab="privacy"> 
         <i class="fas fa-user-secret text-text-secondary mr-3"> </i> 
         <span> 隐私设置 </span> 
        </div> 
        <div class="account-nav-item py-3 px-4 rounded-md flex items-center cursor-pointer" data-tab="display"> 
         <i class="fas fa-palette text-text-secondary mr-3"> </i> 
         <span> 显示设置 </span> 
        </div> 
        <div class="account-nav-item py-3 px-4 rounded-md flex items-center cursor-pointer" data-tab="login"> 
         <i class="fas fa-sign-in-alt text-text-secondary mr-3"> </i> 
         <span> 登录管理 </span> 
        </div> 
       </div> 
       <div class="mt-8 pt-6 border-t border-neutral-dark"> 
        <h3 class="text-lg font-bold mb-4"> 账号安全评分 </h3> 
        <div class="flex items-center justify-between mb-2"> 
         <span class="text-sm font-medium"> 当前安全等级 </span> 
         <span class="text-lg font-bold text-yellow-500"> 75分 </span> 
        </div> 
        <div class="progress-bar w-full mb-4"> 
         <div class="progress-value bg-yellow-500" style="width: 75%"> 
         </div> 
        </div> 
        <p class="text-sm text-text-tertiary mb-4"> 良好，完成以下操作可提升账号安全性 </p> 
        <ul class="space-y-2 text-sm"> 
         <li class="flex items-start"> <i class="fas fa-check-circle text-green-500 mt-1 mr-2"> </i> <span> 已设置登录密码 </span> </li> 
         <li class="flex items-start"> <i class="fas fa-check-circle text-green-500 mt-1 mr-2"> </i> <span> 已绑定手机 </span> </li> 
         <li class="flex items-start"> <i class="fas fa-times-circle text-red-500 mt-1 mr-2"> </i> <span> 未开启二次验证 </span> </li> 
         <li class="flex items-start"> <i class="fas fa-times-circle text-red-500 mt-1 mr-2"> </i> <span> 未设置安全问题 </span> </li> 
        </ul> 
       </div> 
      </div> 
      <!-- 右侧内容 --> 
      <div class="lg:col-span-2 bg-white rounded-lg card-shadow p-6"> 
       <!-- 安全设置 --> 
       <div class="account-tab-content active" id="tab-security"> 
        <h3 class="text-lg font-bold mb-5 pb-3 border-b border-neutral-dark"> 安全设置 </h3> 
        <div class="space-y-6"> 
         <!-- 修改密码 --> 
         <div class="border-b border-neutral-dark pb-6"> 
          <div class="flex justify-between items-center mb-4"> 
           <h4 class="font-medium text-lg"> 修改密码 </h4> 
           <span class="badge badge-gray"> 上次修改：2023-03-15 </span> 
          </div> 
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> 
           <div> 
            <label class="block text-sm font-medium text-text-secondary mb-2"> 当前密码 </label> 
            <div class="relative"> 
             <input type="password" class="input-field pr-10" placeholder="请输入当前密码"> 
             <i class="fas fa-eye text-text-tertiary absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer toggle-password"> </i> 
            </div> 
           </div> 
          </div> 
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4"> 
           <div> 
            <label class="block text-sm font-medium text-text-secondary mb-2"> 新密码 </label> 
            <div class="relative"> 
             <input type="password" class="input-field pr-10" placeholder="请输入新密码"> 
             <i class="fas fa-eye text-text-tertiary absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer toggle-password"> </i> 
            </div> 
            <p class="text-xs text-text-tertiary mt-2"> 密码长度至少8位，包含字母和数字 </p> 
           </div> 
           <div> 
            <label class="block text-sm font-medium text-text-secondary mb-2"> 确认新密码 </label> 
            <div class="relative"> 
             <input type="password" class="input-field pr-10" placeholder="请再次输入新密码"> 
             <i class="fas fa-eye text-text-tertiary absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer toggle-password"> </i> 
            </div> 
           </div> 
          </div> 
          <div class="mt-4 flex justify-end"> 
           <button class="btn-primary"> 保存修改 </button> 
          </div> 
         </div> 
         <!-- 手机验证 --> 
         <div class="border-b border-neutral-dark pb-6"> 
          <div class="flex justify-between items-center mb-4"> 
           <h4 class="font-medium text-lg"> 手机验证 </h4> 
           <span class="badge badge-success"> 已绑定 </span> 
          </div> 
          <div class="flex items-center"> 
           <div class="mr-4"> 
            <span class="text-text-secondary"> 当前已绑定手机： </span> 
            <span class="font-medium ml-2"> 138****5678 </span> 
           </div> 
           <button class="btn-secondary ml-auto" id="change-phone"> 更换手机 </button> 
          </div> 
         </div> 
         <!-- 邮箱验证 --> 
         <div class="border-b border-neutral-dark pb-6"> 
          <div class="flex justify-between items-center mb-4"> 
           <h4 class="font-medium text-lg"> 邮箱验证 </h4> 
           <span class="badge badge-warning"> 未验证 </span> 
          </div> 
          <div class="flex items-center"> 
           <div class="mr-4"> 
            <span class="text-text-secondary"> 当前邮箱： </span> 
            <span class="font-medium ml-2"> zhang.ming@company.com </span> 
           </div> 
           <button class="btn-secondary ml-auto" id="verify-email"> 立即验证 </button> 
          </div> 
         </div> 
         <!-- 二次验证 --> 
         <div class="border-b border-neutral-dark pb-6"> 
          <div class="flex justify-between items-center mb-4"> 
           <h4 class="font-medium text-lg"> 二次验证 </h4> 
           <span class="badge badge-danger"> 未开启 </span> 
          </div> 
          <div class="flex items-center"> 
           <div class="mr-4 flex-1"> 
            <p class="text-text-secondary mb-2"> 开启二次验证后，登录时需要输入手机验证码，提高账号安全性 </p> 
           </div> 
           <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer" id="two-factor-auth"> 
            <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
            </div> </label> 
          </div> 
         </div> 
         <!-- 安全问题 --> 
         <div> 
          <div class="flex justify-between items-center mb-4"> 
           <h4 class="font-medium text-lg"> 安全问题 </h4> 
           <span class="badge badge-danger"> 未设置 </span> 
          </div> 
          <button class="btn-outline"> <i class="fas fa-plus mr-2"> </i> 设置安全问题 </button> 
         </div> 
        </div> 
       </div> 
       <!-- 通知设置 --> 
       <div class="account-tab-content hidden" id="tab-notification"> 
        <h3 class="text-lg font-bold mb-5 pb-3 border-b border-neutral-dark"> 通知设置 </h3> 
        <div class="space-y-6"> 
         <!-- 系统通知 --> 
         <div> 
          <h4 class="font-medium text-lg mb-4"> 系统通知 </h4> 
          <div class="space-y-4"> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               账号安全通知 
             </div> 
             <div class="text-sm text-text-tertiary">
               账号登录、密码修改等安全相关通知 
             </div> 
            </div> 
            <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer" checked> 
             <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
             </div> </label> 
           </div> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               工作任务通知 
             </div> 
             <div class="text-sm text-text-tertiary">
               任务分配、截止提醒等工作相关通知 
             </div> 
            </div> 
            <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer" checked> 
             <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
             </div> </label> 
           </div> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               系统更新通知 
             </div> 
             <div class="text-sm text-text-tertiary">
               系统功能更新、维护等通知 
             </div> 
            </div> 
            <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer" checked> 
             <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
             </div> </label> 
           </div> 
          </div> 
         </div> 
         <!-- 通知方式 --> 
         <div> 
          <h4 class="font-medium text-lg mb-4"> 通知方式 </h4> 
          <div class="space-y-4"> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               站内通知 
             </div> 
             <div class="text-sm text-text-tertiary">
               系统内消息中心通知 
             </div> 
            </div> 
            <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer" checked> 
             <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
             </div> </label> 
           </div> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               短信通知 
             </div> 
             <div class="text-sm text-text-tertiary">
               通过手机短信接收通知 
             </div> 
            </div> 
            <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer" checked> 
             <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
             </div> </label> 
           </div> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               邮件通知 
             </div> 
             <div class="text-sm text-text-tertiary">
               通过邮箱接收通知 
             </div> 
            </div> 
            <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer"> 
             <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
             </div> </label> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="mt-8 flex justify-end"> 
         <button class="btn-primary"> 保存设置 </button> 
        </div> 
       </div> 
       <!-- 隐私设置 --> 
       <div class="account-tab-content hidden" id="tab-privacy"> 
        <h3 class="text-lg font-bold mb-5 pb-3 border-b border-neutral-dark"> 隐私设置 </h3> 
        <div class="space-y-6"> 
         <!-- 个人信息可见性 --> 
         <div> 
          <h4 class="font-medium text-lg mb-4"> 个人信息可见性 </h4> 
          <div class="space-y-4"> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               个人资料 
             </div> 
             <div class="text-sm text-text-tertiary">
               控制其他用户查看您的个人资料信息 
             </div> 
            </div> 
            <select class="input-field w-48"> <option value="all"> 所有人可见 </option> <option value="company" selected> 公司内部可见 </option> <option value="department"> 仅部门可见 </option> <option value="self"> 仅自己可见 </option> </select> 
           </div> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               联系方式 
             </div> 
             <div class="text-sm text-text-tertiary">
               控制其他用户查看您的联系信息 
             </div> 
            </div> 
            <select class="input-field w-48"> <option value="all"> 所有人可见 </option> <option value="company"> 公司内部可见 </option> <option value="department" selected> 仅部门可见 </option> <option value="self"> 仅自己可见 </option> </select> 
           </div> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               工作进度 
             </div> 
             <div class="text-sm text-text-tertiary">
               控制其他用户查看您的工作进度和任务 
             </div> 
            </div> 
            <select class="input-field w-48"> <option value="all"> 所有人可见 </option> <option value="company"> 公司内部可见 </option> <option value="department" selected> 仅部门可见 </option> <option value="self"> 仅自己可见 </option> </select> 
           </div> 
          </div> 
         </div> 
         <!-- 数据授权 --> 
         <div> 
          <h4 class="font-medium text-lg mb-4"> 数据授权 </h4> 
          <div class="space-y-4"> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               允许数据分析 
             </div> 
             <div class="text-sm text-text-tertiary">
               允许系统使用您的匿名数据进行产品优化 
             </div> 
            </div> 
            <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer" checked> 
             <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
             </div> </label> 
           </div> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               第三方应用授权 
             </div> 
             <div class="text-sm text-text-tertiary">
               允许第三方应用访问您的基本信息 
             </div> 
            </div> 
            <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer"> 
             <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
             </div> </label> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="mt-8 flex justify-end"> 
         <button class="btn-primary"> 保存设置 </button> 
        </div> 
       </div> 
       <!-- 显示设置 --> 
       <div class="account-tab-content hidden" id="tab-display"> 
        <h3 class="text-lg font-bold mb-5 pb-3 border-b border-neutral-dark"> 显示设置 </h3> 
        <div class="space-y-6"> 
         <!-- 主题设置 --> 
         <div> 
          <h4 class="font-medium text-lg mb-4"> 主题设置 </h4> 
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> 
           <div class="border-2 border-primary rounded-lg p-4 cursor-pointer flex flex-col items-center"> 
            <div class="w-full h-16 bg-white rounded-md mb-3 flex items-center justify-center"> 
             <span class="font-medium"> 默认主题 </span> 
            </div> 
            <div class="w-3 h-3 rounded-full bg-primary"> 
            </div> 
           </div> 
           <div class="border-2 border-transparent hover:border-neutral-dark rounded-lg p-4 cursor-pointer flex flex-col items-center"> 
            <div class="w-full h-16 bg-gray-800 rounded-md mb-3 flex items-center justify-center"> 
             <span class="font-medium text-white"> 深色主题 </span> 
            </div> 
            <div class="w-3 h-3 rounded-full bg-gray-300"> 
            </div> 
           </div> 
           <div class="border-2 border-transparent hover:border-neutral-dark rounded-md p-4 cursor-pointer flex flex-col items-center"> 
            <div class="w-full h-16 bg-blue-50 rounded-md mb-3 flex items-center justify-center"> 
             <span class="font-medium text-blue-700"> 蓝色主题 </span> 
            </div> 
            <div class="w-3 h-3 rounded-full bg-blue-200"> 
            </div> 
           </div> 
          </div> 
         </div> 
         <!-- 界面设置 --> 
         <div> 
          <h4 class="font-medium text-lg mb-4"> 界面设置 </h4> 
          <div class="space-y-4"> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               紧凑模式 
             </div> 
             <div class="text-sm text-text-tertiary">
               减少界面元素间距，显示更多内容 
             </div> 
            </div> 
            <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer"> 
             <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
             </div> </label> 
           </div> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               侧边栏收起 
             </div> 
             <div class="text-sm text-text-tertiary">
               默认收起左侧导航栏 
             </div> 
            </div> 
            <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer"> 
             <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
             </div> </label> 
           </div> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               显示面包屑 
             </div> 
             <div class="text-sm text-text-tertiary">
               在顶部显示当前页面路径 
             </div> 
            </div> 
            <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer" checked> 
             <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
             </div> </label> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="mt-8 flex justify-end"> 
         <button class="btn-primary"> 保存设置 </button> 
        </div> 
       </div> 
       <!-- 登录管理 --> 
       <div class="account-tab-content hidden" id="tab-login"> 
        <h3 class="text-lg font-bold mb-5 pb-3 border-b border-neutral-dark"> 登录管理 </h3> 
        <div class="space-y-6"> 
         <!-- 登录设备 --> 
         <div> 
          <div class="flex justify-between items-center mb-4"> 
           <h4 class="font-medium text-lg"> 当前登录设备 </h4> 
          </div> 
          <div class="bg-neutral rounded-lg p-4 mb-4"> 
           <div class="flex items-start"> 
            <div class="bg-white p-3 rounded-full mr-4"> 
             <i class="fas fa-desktop text-primary text-xl"> </i> 
            </div> 
            <div class="flex-1"> 
             <div class="flex justify-between items-start mb-1"> 
              <div class="font-medium">
                Windows 10 · Chrome 112.0 
              </div> 
              <span class="badge badge-success"> 当前设备 </span> 
             </div> 
             <div class="text-sm text-text-tertiary mb-2">
               IP: 192.168.1.100 · 登录时间: 2023-06-15 09:30 
             </div> 
             <div class="text-sm text-text-tertiary">
               上次活动: 刚刚 
             </div> 
            </div> 
           </div> 
          </div> 
          <h4 class="font-medium text-lg mb-4"> 最近登录记录 </h4> 
          <div class="space-y-3"> 
           <div class="bg-neutral rounded-lg p-4"> 
            <div class="flex items-start"> 
             <div class="bg-white p-2 rounded-full mr-4"> 
              <i class="fas fa-laptop text-text-secondary text-lg"> </i> 
             </div> 
             <div class="flex-1"> 
              <div class="flex justify-between items-start mb-1"> 
               <div class="font-medium">
                 macOS · Safari 16.0 
               </div> 
              </div> 
              <div class="text-sm text-text-tertiary mb-2">
                IP: 10.0.0.5 · 登录时间: 2023-06-14 15:20 
              </div> 
              <div class="text-sm text-text-tertiary">
                地点: 北京市 
              </div> 
             </div> 
            </div> 
           </div> 
           <div class="bg-neutral rounded-lg p-4"> 
            <div class="flex items-start"> 
             <div class="bg-white p-2 rounded-full mr-4"> 
              <i class="fas fa-mobile-alt text-text-secondary text-lg"> </i> 
             </div> 
             <div class="flex-1"> 
              <div class="flex justify-between items-start mb-1"> 
               <div class="font-medium">
                 iOS 16.4 · 移动设备 
               </div> 
              </div> 
              <div class="text-sm text-text-tertiary mb-2">
                IP: 172.16.0.8 · 登录时间: 2023-06-13 08:45 
              </div> 
              <div class="text-sm text-text-tertiary">
                地点: 上海市 
              </div> 
             </div> 
            </div> 
           </div> 
           <div class="bg-neutral rounded-lg p-4"> 
            <div class="flex items-start"> 
             <div class="bg-white p-2 rounded-full mr-4"> 
              <i class="fas fa-laptop text-text-secondary text-lg"> </i> 
             </div> 
             <div class="flex-1"> 
              <div class="flex justify-between items-start mb-1"> 
               <div class="font-medium">
                 Windows 10 · Edge 111.0 
               </div> 
              </div> 
              <div class="text-sm text-text-tertiary mb-2">
                IP: 192.168.1.102 · 登录时间: 2023-06-12 16:30 
              </div> 
              <div class="text-sm text-text-tertiary">
                地点: 北京市 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
          <button class="btn-outline w-full mt-4"> 查看更多登录记录 </button> 
         </div> 
         <!-- 登录保护 --> 
         <div> 
          <h4 class="font-medium text-lg mb-4"> 登录保护 </h4> 
          <div class="space-y-4"> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               陌生设备登录提醒 
             </div> 
             <div class="text-sm text-text-tertiary">
               在新设备登录时发送提醒 
             </div> 
            </div> 
            <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer" checked> 
             <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
             </div> </label> 
           </div> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               登录IP限制 
             </div> 
             <div class="text-sm text-text-tertiary">
               仅允许在指定IP段登录 
             </div> 
            </div> 
            <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer"> 
             <div class="w-11 h-6 bg-neutral-dark peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[&quot;&quot;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"> 
             </div> </label> 
           </div> 
           <div class="flex items-center justify-between"> 
            <div> 
             <div class="font-medium mb-1">
               自动登出时间 
             </div> 
             <div class="text-sm text-text-tertiary">
               长时间未操作自动登出 
             </div> 
            </div> 
            <select class="input-field w-48"> <option value="15"> 15分钟 </option> <option value="30" selected> 30分钟 </option> <option value="60"> 1小时 </option> <option value="120"> 2小时 </option> <option value="240"> 4小时 </option> </select> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="mt-8 flex justify-end"> 
         <button class="btn-primary"> 保存设置 </button> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- 更换手机模态框 --> 
     <div id="change-phone-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4"> 
      <div class="bg-white rounded-lg w-full max-w-md"> 
       <div class="p-5 border-b border-neutral-dark flex items-center justify-between"> 
        <h3 class="text-lg font-bold"> 更换手机号码 </h3> 
        <button id="close-phone-modal" class="text-text-tertiary hover:text-text-primary transition-colors duration-200"> <i class="fas fa-times"> </i> </button> 
       </div> 
       <div class="p-6"> 
        <div class="space-y-4"> 
         <div> 
          <label class="block text-sm font-medium text-text-secondary mb-2"> 原手机号码 </label> 
          <div class="flex items-center p-3 border border-neutral-dark rounded-md bg-neutral/50"> 
           <span> 138****5678 </span> 
          </div> 
         </div> 
         <div> 
          <label class="block text-sm font-medium text-text-secondary mb-2"> 新手机号码 </label> 
          <input type="tel" class="input-field" placeholder="请输入新手机号码"> 
         </div> 
         <div> 
          <label class="block text-sm font-medium text-text-secondary mb-2"> 验证码 </label> 
          <div class="flex space-x-3"> 
           <input type="text" class="input-field" placeholder="请输入验证码"> 
           <button class="btn-outline flex-shrink-0" id="send-code"> 获取验证码 </button> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="p-5 border-t border-neutral-dark flex justify-end space-x-3"> 
        <button id="cancel-phone" class="btn-outline"> 取消 </button> 
        <button id="confirm-phone" class="btn-primary"> 确认更换 </button> 
       </div> 
      </div> 
     </div> 
     <!-- 验证邮箱模态框 --> 
     <div id="verify-email-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4"> 
      <div class="bg-white rounded-lg w-full max-w-md"> 
       <div class="p-5 border-b border-neutral-dark flex items-center justify-between"> 
        <h3 class="text-lg font-bold"> 验证邮箱 </h3> 
        <button id="close-email-modal" class="text-text-tertiary hover:text-text-primary transition-colors duration-200"> <i class="fas fa-times"> </i> </button> 
       </div> 
       <div class="p-6"> 
        <div class="text-center mb-6"> 
         <i class="fas fa-envelope text-primary text-4xl mb-3"> </i> 
         <p class="text-text-secondary"> 我们已向 <span class="font-medium"> zhang.ming@company.com </span> 发送了一封验证邮件，请查收并完成验证。 </p> 
        </div> 
        <div class="space-y-4"> 
         <div> 
          <label class="block text-sm font-medium text-text-secondary mb-2"> 邮箱验证码 </label> 
          <div class="flex space-x-3"> 
           <input type="text" class="input-field" placeholder="请输入验证码"> 
           <button class="btn-outline flex-shrink-0" id="resend-email" disabled> <span id="countdown"> 60 </span> 秒后重新发送 </button> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="p-5 border-t border-neutral-dark flex justify-between"> 
        <button id="change-email" class="text-primary text-sm hover:underline"> 更换邮箱 </button> 
        <button id="confirm-email" class="btn-primary"> 确认验证 </button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- 其他页面内容保持不变 --> 
    <div class="page hidden" id="page-basic-info"> 
    </div> 
    <div class="page hidden" id="page-learning-plan"> 
    </div> 
    <div class="page hidden" id="page-knowledge-base"> 
    </div> 
    <div class="page hidden" id="page-company-culture"> 
    </div> 
    <div class="page hidden" id="page-course-center"> 
    </div> 
    <div class="page hidden" id="page-work-dashboard"> 
    </div> 
    <div class="page hidden" id="page-meeting-plan"> 
    </div> 
    <div class="page hidden" id="page-work-tasks"> 
    </div> 
    <div class="page hidden" id="page-monthly-tasks"> 
    </div> 
    <div class="page hidden" id="page-latest-announcements"> 
    </div> 
    <div class="page hidden" id="page-historical-announcements"> 
    </div> 
    <div class="page hidden" id="page-goal-dashboard"> 
    </div> 
    <div class="page hidden" id="page-performance-entry"> 
    </div> 
    <div class="page hidden" id="page-product-library"> 
    </div> 
    <div class="page hidden" id="page-marketing-plan"> 
    </div> 
    <div class="page hidden" id="page-customer-records"> 
    </div> 
    <div class="page hidden" id="page-pk-activities"> 
    </div> 
   </div> 
  </main> 
  <script>// 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 菜单切换功能
            const menuItems = document.querySelectorAll('.menu-item[data-menu]');
            menuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有菜单的活动状态
                    document.querySelectorAll('.menu-item').forEach(menu => { menu.classList.remove('menu-item-active'); });
                    
                    // 添加当前菜单的活动状态
                    item.classList.add('menu-item-active'); 
                    
                    const menuId = item.getAttribute('data-menu');
                    const submenu = document.getElementById(`submenu-${menuId}`);
                    const icon = item.querySelector('i:last-child');
                    
                    // 切换子菜单显示/隐藏
                    if (submenu.classList.contains('hidden')) {
                        submenu.classList.remove('hidden');
                        icon.classList.remove('fa-chevron-right');
                        icon.classList.add('fa-chevron-down');
                    } else {
                        submenu.classList.add('hidden');
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-right');
                    }
                });
            });
            
            // 子菜单切换功能
            const submenuItems = document.querySelectorAll('.submenu-item[data-page]');
            submenuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有子菜单的活动状态
                    document.querySelectorAll('.submenu-item').forEach(submenu => { submenu.classList.remove('submenu-item-active'); });
                    
                    // 添加当前子菜单的活动状态
                    item.classList.add('submenu-item-active');
                    
                    // 获取页面ID和面包屑信息
                    const pageId = item.getAttribute('data-page');
                    const parentMenu = item.closest('.submenu').id.replace('submenu-', '');
                    const parentMenuText = document.querySelector(`.menu-item[data-menu="${parentMenu}"] span`).textContent;
                    const currentMenuText = item.querySelector('span').textContent;
                    
                    // 更新面包屑
                    document.getElementById('breadcrumb').innerHTML = `












<span>${parentMenuText}</span>
  <i class="fas fa-angle-right mx-2 text-xs">
  </i>
  <span>${currentMenuText}</span>
    
    
    
    
    
    
    
    
    
    
    
    
  `;
                    
                    // 切换页面显示
                    document.querySelectorAll('.page').forEach(page => { page.classList.add('hidden'); });                    
                    document.getElementById(`page-${pageId}`).classList.remove('hidden');
                });
            });
            
            // 侧边栏切换功能
            const toggleSidebar = document.getElementById('toggle-sidebar');
            const sidebar = document.getElementById('sidebar');
            toggleSidebar.addEventListener('click', () => {
                if (sidebar.classList.contains('w-220')) {
                    sidebar.classList.remove('w-220');  
                    sidebar.classList.add('w-20');
                    // 隐藏菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.add('hidden'); });
                    document.querySelectorAll('.submenu').forEach(submenu => { submenu.classList.add('hidden'); });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.add('hidden'); });
                } else {
                    sidebar.classList.remove('w-20');
                    sidebar.classList.add('w-220');
                    // 显示菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.remove('hidden'); });
                    // 恢复之前打开的子菜单
                    document.querySelectorAll('.menu-item-active').forEach(menu => {
                        const menuId = menu.getAttribute('data-menu');
                        const submenu = document.getElementById(`submenu-${menuId}`);
                        if (submenu) { submenu.classList.remove('hidden'); }
                    });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.remove('hidden'); });                    
                }
            });
            
            // 账号设置页面功能
            const accountNavItems = document.querySelectorAll('.account-nav-item');
            const accountTabContents = document.querySelectorAll('.account-tab-content');
            
            accountNavItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有导航项的活动状态
                    accountNavItems.forEach(navItem => {
                        navItem.classList.remove('active', 'bg-primary/10', 'text-primary');
                        navItem.classList.add('text-text-secondary');
                        navItem.querySelector('i').classList.remove('text-primary');
                        navItem.querySelector('i').classList.add('text-text-secondary');
                    });
                    
                    // 添加当前导航项的活动状态
                    item.classList.add('active', 'bg-primary/10', 'text-primary');
                    item.classList.remove('text-text-secondary');
                    item.querySelector('i').classList.add('text-primary');
                    item.querySelector('i').classList.remove('text-text-secondary');
                    
                    // 获取标签ID
                    const tabId = item.getAttribute('data-tab');
                    
                    // 隐藏所有内容
                    accountTabContents.forEach(content => {
                        content.classList.add('hidden');
                        content.classList.remove('active');
                    });
                    
                    // 显示当前内容
                    document.getElementById(`tab-${tabId}`).classList.remove('hidden');
                    document.getElementById(`tab-${tabId}`).classList.add('active');
                });
            });
            
            // 密码显示/隐藏切换
            const togglePasswordButtons = document.querySelectorAll('.toggle-password');
            togglePasswordButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const input = button.parentElement.querySelector('input');
                    const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
                    input.setAttribute('type', type);
                    
                    // 切换图标
                    if (type === 'text') {
                        button.classList.remove('fa-eye');
                        button.classList.add('fa-eye-slash');
                    } else {
                        button.classList.remove('fa-eye-slash');
                        button.classList.add('fa-eye');
                    }
                });
            });
            
            // 更换手机模态框
            const changePhoneModal = document.getElementById('change-phone-modal');
            
            document.getElementById('change-phone').addEventListener('click', () => {
                changePhoneModal.classList.remove('hidden');
                changePhoneModal.classList.add('flex');
            });
            
            document.getElementById('close-phone-modal').addEventListener('click', () => {
                changePhoneModal.classList.add('hidden');
                changePhoneModal.classList.remove('flex');
            });
            
            document.getElementById('cancel-phone').addEventListener('click', () => {
                changePhoneModal.classList.add('hidden');
                changePhoneModal.classList.remove('flex');
            });
            
            document.getElementById('confirm-phone').addEventListener('click', () => {
                alert('手机号码更换成功！');
                changePhoneModal.classList.add('hidden');
                changePhoneModal.classList.remove('flex');
            });
            
            // 点击模态框外部关闭
            changePhoneModal.addEventListener('click', (e) => {
                if (e.target === changePhoneModal) {
                    changePhoneModal.classList.add('hidden');
                    changePhoneModal.classList.remove('flex');
                }
            });
            
            // 验证邮箱模态框
            const verifyEmailModal = document.getElementById('verify-email-modal');
            
            document.getElementById('verify-email').addEventListener('click', () => {
                verifyEmailModal.classList.remove('hidden');
                verifyEmailModal.classList.add('flex');
                
                // 开始倒计时
                let countdown = 60;
                const countdownElement = document.getElementById('countdown');
                const resendButton = document.getElementById('resend-email');
                
                const timer = setInterval(() => {
                    countdown--;
                    countdownElement.textContent = countdown;
                    
                    if (countdown <= 0) {
                        clearInterval(timer);
                        resendButton.disabled = false;
                        resendButton.innerHTML = `











<i class="fas fa-redo mr-2">
</i>重新发送











`;
                    }
                }, 1000);
                
                // 重新发送邮件
                resendButton.addEventListener('click', () => {
                    if (!resendButton.disabled) {
                        countdown = 60;
                        countdownElement.textContent = countdown;
                        resendButton.disabled = true;
                        resendButton.innerHTML = '<span id="countdown">60</span>秒后重新发送';
                        
                        timer = setInterval(() => {
                            countdown--;
                            countdownElement.textContent = countdown;
                            
                            if (countdown <= 0) {
                                clearInterval(timer);
                                resendButton.disabled = false;
                                resendButton.innerHTML = `











<i class="fas fa-redo mr-2">
</i>重新发送











`;
                            }
                        }, 1000);
                        
                        alert('验证邮件已重新发送，请查收！');
                    }
                });
            });
            
            document.getElementById('close-email-modal').addEventListener('click', () => {
                verifyEmailModal.classList.add('hidden');
                verifyEmailModal.classList.remove('flex');
            });
            
            document.getElementById('confirm-email').addEventListener('click', () => {
                alert('邮箱验证成功！');
                verifyEmailModal.classList.add('hidden');
                verifyEmailModal.classList.remove('flex');
            });
            
            // 点击模态框外部关闭
            verifyEmailModal.addEventListener('click', (e) => {
                if (e.target === verifyEmailModal) {
                    verifyEmailModal.classList.add('hidden');
                    verifyEmailModal.classList.remove('flex');
                }
            });
            
            // 二次验证开关
            const twoFactorAuthCheckbox = document.getElementById('two-factor-auth');
            twoFactorAuthCheckbox.addEventListener('change', () => {
                if (twoFactorAuthCheckbox.checked) {
                    alert('开启二次验证需要验证您的手机，请在下一步操作中完成验证。');
                }
            });
        });</script>  
 </body>
</html>